<template>
    <div>
    </div>
</template>

<script setup lang="ts">
import { useVueCesium } from 'vue-cesium'
import type { VcViewerProvider, VcReadyObject } from 'vue-cesium/es/utils/types'

const props = defineProps({
    posArr: Array
});

const $vc: VcViewerProvider = useVueCesium()

$vc.creatingPromise.then((readyObj: VcReadyObject) => {

    let Cesium: any = readyObj.Cesium
    let viewer = readyObj.viewer

    //动态墙材质
    function PolylineTrailLinkMaterialProperty(this: any, options) {
        this._definitionChanged = new Cesium.Event();
        this._color = undefined;
        this._colorSubscription = undefined;
        this.color = options.color;
        this.duration = options.duration;
        this.trailImage = options.trailImage;
        this._time = (new Date()).getTime();
    }
    Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
        isConstant: {
            get: function () {
                return false;
            }
        },
        definitionChanged: {
            get: function () {
                return this._definitionChanged;
            }
        },
        color: Cesium.createPropertyDescriptor('color')
    });
    PolylineTrailLinkMaterialProperty.prototype.getType = function (time: any) {
        return 'PolylineTrailLink';
    };
    PolylineTrailLinkMaterialProperty.prototype.getValue = function (time: any, result: { color?: any; image?: any; time?: any; }) {
        if (!Cesium.defined(result)) {
            result = {};
        }
        result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
        if (this.trailImage) {
            result.image = this.trailImage;
        } else {
            result.image = Cesium.Material.PolylineTrailLinkImage
        }

        if (this.duration) {
            result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
        }
        readyObj.viewer.scene.requestRender();
        return result;
    };
    PolylineTrailLinkMaterialProperty.prototype.equals = function (other: { _color: any; }) {
        return this === other ||
            (other instanceof PolylineTrailLinkMaterialProperty
                && Cesium.Property.equals(this._color, other._color))
    };
    Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
    Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
    Cesium.Material.PolylineTrailLinkImage = new URL('./colors.png', import.meta.url).href;
    Cesium.Material.PolylineTrailLinkSource = `czm_material czm_getMaterial(czm_materialInput 
                                                materialInput)\n\
                                                {\n\
                                                czm_material material = 
                                                czm_getDefaultMaterial(materialInput);\n\
                                                vec2 st = materialInput.st;\n\
                                                vec4 colorImage = texture2D(image, 
                                                vec2(fract(st.t - time), st.t));\n\
                                                vec4 fragColor;\n\
                                                fragColor.rgb = color.rgb / 1.0;\n\
                                                fragColor = czm_gammaCorrect(fragColor);\n\
                                                material.alpha = colorImage.a * color.a;\n\
                                                material.diffuse = color.rgb;\n\
                                                material.emission = fragColor.rgb;\n\
                                                return material;\n\
                                                }`;
    Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
        fabric: {
            type: Cesium.Material.PolylineTrailLinkType,
            uniforms: {
                color: new Cesium.Color(1.0, 1.0, 1.0, 1),
                image: Cesium.Material.PolylineTrailLinkImage,
                time: 0
            },
            source: Cesium.Material.PolylineTrailLinkSource
        },
        translucent: function (material: any) {
            return true;
        }
    });


    var path: any = props.posArr;

    var wall = readyObj.viewer.entities.add({
        wall: {
            positions: Cesium.Cartesian3.fromDegreesArray(path),
            material: new Cesium.PolylineTrailLinkMaterialProperty({
                //  color: Cesium.Color.RED.withAlpha(0.5),
                color: new Cesium.Color(0.0, 1.0, 1.0, 0.5),
                duration: 1500 // 持续时间,单位毫秒（0时为静止状态）
            }),
            maximumHeights: [100, 100, 100, 100, 100],
            minimumHeights: [0, 0, 0, 0, 0]
        }
    });
    readyObj.viewer.flyTo(wall);

})

</script>